<template>
  <el-dialog v-model="dialogVisible" :title="dialogTitle" width="50%" @open="openDialog">
    <el-select v-model="dataPermission" placeholder="请选择数据权限" @change="selectChange">
      <el-option v-for="item in optionList" :key="item.value" v-bind="item" />
    </el-select>
    <el-tree
      v-show="dataPermission === 3"
      ref="treeRef"
      show-checkbox
      :data="treeData"
      :props="tree.props"
      node-key="id"
      :default-checked-keys="defaultExpandedKeys"
      :default-expanded-keys="[1]"
      @check-change="treeCheck"
    />
    <template #footer>
      <span class="dialog-footer">
        <el-button type="primary" :loading="loading" @click="submit">确认</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref, reactive, nextTick, getCurrentInstance, toRef } from 'vue'
import { Delete, Plus } from '@element-plus/icons-vue'
import { internetApi } from '@/api/api.js'
import { arrayToTree } from '@/utils/tree.js'
import { ElMessage } from 'element-plus'

const props = defineProps({
  getMenuList: {
    type: Function,
    default: () => {}
  }
})

const currentInstance = getCurrentInstance()
const { $request } = currentInstance.appContext.config.globalProperties
const optionList = [
  { label: '本人数据权限', value: 1 },
  { label: '本部门数据权限', value: 2 },
  { label: '自定义数据权限', value: 3 }
]
const dialogTitle = ref('') //弹窗标题
const dialogVisible = ref(false)
const dataPermission = ref(null)
const treeList = ref([])
const treeData = ref([])
const deptIdList = ref([]) //菜单列表权限ID
const treeRef = ref(null)
const roleId = ref('')
const loading = ref(false)
const defaultExpandedKeys = ref([])
const tree = {
  props: {
    children: 'children',
    label: 'name'
  }
}
const openDialog = (row, type) => {
  optionList.value = [
    { label: '本人数据权限', value: 1 },
    { label: '本部门数据权限', value: 2 },
    { label: '自定义数据权限', value: 3 }
  ]
  dialogTitle.value = '数据权限'
  dialogVisible.value = true
  if (type === 'jurisdiction') {
    dataPermission.value = row.dataPermission
    roleId.value = row.id
    if (row.dataPermission === 3) {
      Promise.all([getDeptList(), getRoleDataPermission(row.id)])
    }
  }
}
// 选择下拉
const selectChange = (e) => {
  if (e === 3) {
    //自定义数据权限时，获取组织架构
    getDeptList()
  }
  deptIdList.value = []
}
// 点击选中的树节点
const treeCheck = () => {
  deptIdList.value = treeRef.value.getCheckedKeys()
  // console.log('1--------------------------------->',deptIdList.value)
}
//获取当前角色已有的自定义数据权限
const getRoleDataPermission = (id) => {
  $request(internetApi.getRoleDataPermission, { roleId: id }).then((res) => {
    deptIdList.value = res.data
    // 接口返回一级id，所以默认全面选择，故去除
    defaultExpandedKeys.value = res.data.filter((item) => item != 1)
  })
}
//获取组织架构列表
const getDeptList = () => {
  //判断是否加载过组织列表，如果加载过，就不重复加载
  // if (treeList.value.length === 0 && treeData.value.length === 0) {
  $request(internetApi.getDeptList).then((res) => {
    treeList.value = res.data
    treeData.value = arrayToTree(res.data, { pid: 'parentId', rootId: 0 })
    //  tree.defaultExpandedKeys = treeData.value.map((item) => item.id)
    //  console.log(treeData.value.map(d))
  })
  // const rootId = data[0].parentId
  // }
}
// 数据权限提交
const submit = () => {
  loading.value = true
  $request(internetApi.addRoleDataPermission, {
    roleId: roleId.value,
    deptIdList: deptIdList.value,
    dataPermission: dataPermission.value
  })
    .then(() => {
      dialogVisible.value = false
      loading.value = false
      props.getMenuList()
      ElMessage({
        message: '操作成功',
        type: 'success'
      })
    })
    .catch(() => {
      loading.value = false
    })
}
// 导出，使父组件可调用子组件的方法或者值
defineExpose({
  openDialog
})
</script>
<style lang="scss" scoped>
.from-footer {
  width: 100%;
  display: flex;
  justify-content: flex-end;
}
.menu-dialog {
  .el-select {
    width: 100%;
  }
}
</style>
